<template>
	<view class="login-container">
		<view class="logo-image">
			<u--image showLoading :src="logo" width="360rpx" height="360rpx"></u--image>
		</view>
		<view class="login-form">
			<u--form labelPosition="top" labelWidth="auto" :model="loginForm" :rules="rules" ref="uForm">
				<u-form-item label="用户名" prop="userName">
					<u-input v-model="loginForm.userName" border="none" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="loginForm.password" border="none" type="password" password />
				</u-form-item>
				<u-form-item>
					<u-button type="primary" text="登录" @click="login" />
					<u-button type="success" text="注册" />
				</u-form-item>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from '../../http.js'
	export default {
		data() {
			return {
				logo: 'http://124.223.9.151:8000/admin/favicon.ico',
				loginForm: {
					userName: 'student',
					password: '123456',
					rember: false
				},
				rules: {
					userName: {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			login() {
				this.$refs.uForm.validate().then(res => {
					console.log(this.loginForm);
					http({
						url: '/api/user/login',
						method: 'POST',
						data: this.loginForm
					}).then(res => {
						console.log(res);
						if (res.code === 1) {
							this.$refs.uToast.show({
								type: "success",
								message: "登录成功",
								duration: 1000,
								complete() {
									uni.switchTab({
										url: '/pages/index/index'
									})
								},
							});
						} else {
							this.$refs.uToast.show({
								type: "error",
								message: res.message,
								duration: 1000
							});
						}
					})

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

		.login-container {
			width: 750rpx;
			height: 100%;
			background-color: #F7F7F7;

			.logo-image {
				display: flex;
				justify-content: center;
			}

			.login-form {
				text-indent: 30rpx;

				.u-form-item {
					margin: 0 20rpx;

					input {
						height: 80rpx;
						background-color: #FFFFFF;
						padding-left: 30rpx;
					}

					button {
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>